<template>
    <div class="calendar-sec">
        <header>首页</header>
        <div v-if="messageList.length > 0" class="calendar flex-box-align mb30">
            <!--<div class="calendar-out-div">-->
                <!--<router-link to="/myCalendar">-->
                    <!--<div class="flex-cont">-->
                        <!--<img src="" alt="">-->
                        <!--<span>我的日历</span>-->
                    <!--</div>-->
                <!--</router-link>-->
            <!--</div>-->
            <div class="flex-box-align" style="padding-left: 18px; position: relative; width: 100%;">
                今日要事：
                <div class="message">
                    <ul class="marquee_list" :style="{ top: -num + 'px'}" :class="{marquee_top:num}">
                        <li v-for="(item, index) in messageList" :key="index" v-if="messageList && messageList.length">
                            <router-link :to="{name: item.route}">{{item.showMsg}}</router-link>
                        </li>
                    </ul>
                </div>

            </div>

        </div>
        <div class="my-calendar flex-box-justify">
            <div style="width: 40%;">
                <div class="middle flex-box-align">
                    <div class="flex flex-box-align">
                        <el-date-picker
                                v-model="month"
                                type="month"
                                placeholder="选择年月"
                                @change="handleChangeDate"
                                value-format="yyyy/MM"
                                style="width: 120px;font-size: 14px;margin-right: 10px;"
                        >
                        </el-date-picker>
                        <el-button style="margin-right: 10px;" @click="handleBackToday">回到今天</el-button>
                    </div>
                    <div style="color: #ED7018;font-size: 14px;">{{date}}</div>
                </div>
                <div style="padding: 0 0 15px 15px;">
                    <vue-event-calendar :events="demoEvents" @monthChanged="monthChange" @day-changed="dayChange">

                    </vue-event-calendar>
                </div>
            </div>
            <div style="width: 57%; margin-left: 3%; padding-right: 20px;">
                <div class="today-title">当日订单</div>
                <ul class="today-order-list" v-if="list && list.length" >
                    <li class="order-item flex-box-align" v-for="(item, index) in list" :key="index">
                        <div class="flex">{{item.showMsg}}</div>
                        <div>{{item.date}}</div>
                    </li>
                </ul>
                <div v-else style="text-align: center;margin-top: 20px;">暂无当日订单</div>
            </div>
        </div>
    </div>

</template>

<script>
    import {parseUrlParams} from "../util";
    let CONSTANT = require('../constant/constant.js'),
        common = require('../common.js');
    export default {
        data () {
            return {
                demoEvents: [{
                    date: '2016/12/15',
                    title: 'eat',
                    desc: 'longlonglong description'
                },{
                    date: '2016/11/12',
                    title: 'this is a title'
                }],
                list: [],
                date: "",
                today: "",
                year: "",
                month: "",
                num: 0,
                messageList: [],
            }
        },
        created() {
        },
        mounted(){
            this.getMessage()
            setInterval( () => {
                this.getMessage()
            }, 120000)
            Date.prototype.format = function (fmt) {
                var o = {
                    "M+": this.getMonth() + 1, //月份
                    "d+": this.getDate(), //日
                    "h+": this.getHours(), //小时
                    "m+": this.getMinutes(), //分
                    "s+": this.getSeconds(), //秒
                    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                    "S": this.getMilliseconds() //毫秒
                };
                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            }

            let today = new Date();
            today.setDate(today.getDate());
            let date = today.format("yyyy-MM-dd");
            this.today = date;
            this.date = date
            this.getList(date)
        },
        methods: {
            getMessage() {
                let url = CONSTANT.URL.CALENDAR.MESSAGELIST;
                common.requestAjax(url, {}, {}, (data) => {
                    if(data.status == 200) {
                        this.messageList = data.data.bussData;
                        this.showMarquee(this.num)
                    }
                })
            },
            getList(date) {
                let url = CONSTANT.URL.CALENDAR.CALENDARLIST;
                common.requestAjax(url, {}, {date: date}, (data) => {
                    if(data.status == 200) {
                        this.list = data.data.bussData
                    }
                })
            },
            monthChange (month) {
                console.log(month)
            },
            dayChange (day) {
                let clickDate = day.date.split("/").join("-")
                this.date = clickDate
                this.getList(clickDate)
            },
            handleChangeDate(val) {
                if (val) {
                    this.$EventCalendar.toDate(this.month)
                } else {
                    this.handleBackToday()
                }
            },
            handleBackToday() {
                let today = this.today.split("-").join("/")
                this.$EventCalendar.toDate(today)
            },
            showMarquee:function (num) {
                if (!this.messageList[0]) return
                this.messageList.push(this.messageList[0]);
                var max = this.messageList.length;
                var that = this;
                let marqueetimer =  setInterval(function(){
                    num++;
                    if(num>=max ){
                        num=0;
                    }
                    that.num=num*30;
                }, 2000);
            }
        }
    }
</script>
<style lang="scss">
    .message {
        display: block;
        position: relative;
        width: 60%;
        height: 30px;/*关键样式*/
        overflow: hidden;
    }
    .marquee_list{
        display: block;
        position: absolute;
        top:0;
        left: 0;
    }
    .marquee_top{transition: top 0.5s ;}/*关键样式*/
    .marquee_list li{
        height: 30px;/*关键样式*/
        line-height: 30px;/*关键样式*/
        font-size: 14px;
        padding-left: 20px;
        background-color: #fff;
        a {
            color: #333;
        }
    }
    .calendar-sec {
        header {
            margin: 19px 0;
            font-size: 14px;
            color: #999;
        }
        .calendar {
            font-size: 14px;
            height: 70px;
            line-height: 70px;
            background-color: #fff;
            border-bottom: 1px solid #E1E1E1;
            .calendar-out-div {
                margin-left: 16px;
                div:nth-child(1) {
                    color: #fff;
                    width: 120px;
                    height: 40px;
                    line-height: 40px;
                    /*margin-left: 16px;*/
                    background-color: #ED7018;
                    border-radius: 4px;
                    box-shadow:2px 0px 1px rgba(15,5,9,0.2);
                    a {
                        color: #fff;
                    }
                }
            }

            div:nth-child(2) {
                margin-left: 150px;
                white-space: nowrap;
            }
        }

        .my-calendar {
            background-color: #fff;
            font-family: 'Avenir', Helvetica, Arial, sans-serif;
            .middle {
                padding: 12px 15px;
            }
            .cal-wrapper {
                width: 100%;
                padding: 0;
                border: 1px solid #e1e1e1;
                .cal-body {
                    background-color: #fff;
                    .item {
                        cursor: pointer;
                    }
                    .dates {
                        .today {
                            position: relative;
                            .date-num {
                                color: #fff!important;
                            }
                            span.is-today {
                                position: absolute;
                                width: 40px!important;
                                height: 40px!important;
                                margin: 0!important;
                                transform: translate(-50%, -50%);
                                background-color: #ED7018!important;
                            }
                        }
                    }
                }
            }
            .events-wrapper {
                display: none;
            }

            .today-title {
                text-align: center;
                padding: 22px 0;
                border-bottom: 1px solid #e1e1e1;
            }

            .today-order-list {
                .order-item {
                    padding: 19px 0;
                    font-size: 14px;
                    border-bottom: 1px solid #e1e1e1;
                }
            }
        }
    }
</style>
